<template>
  <div class="appendAccount">
    <div v-for="(item,index) in appendData" :key="index" class="item">
      <div class="itemName"><div v-if="item.must" style="color: red">*</div>{{item.name}}：</div>
      <div v-if="item.type === 'input'">
        <a-input style="width: 200px" v-model="item.val" :placeholder="item.place" />
      </div>
      <div v-if="item.type === 'radio'">
        <a-radio-group v-model="item.val">
          <a-radio :value="1">男</a-radio>
          <a-radio :value="2">女</a-radio>
        </a-radio-group>
      </div>
      <div v-if="item.type === 'select'">
      <a-select
        show-search
        placeholder="Select a person"
        option-filter-prop="children"
        style="width: 200px"
        :filter-option="filterOption"
        @change="e=>{selectChange(index,e)}"
        :value="item.val?item.val:undefined"
        :placeholder="item.place"
        allowClear
      >
        <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
          {{demo[item.nameKey]}}
        </a-select-option>
      </a-select>
    </div>
    <div v-if="item.type === 'selectAll'">
      <a-select
        show-search
        mode="multiple"
        placeholder="Select a person"
        option-filter-prop="children"
        style="width: 181px"
        :filter-option="filterOption"
        @change="e=>{selectRoleChange(index,e,item.selectData)}"
        :value="item.val?item.val:undefined"
        :placeholder="item.place"
        allowClear
      >
        <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
          {{demo[item.nameKey]}}
        </a-select-option>
      </a-select>
    </div>
    </div>
    <a-menu v-model="current" mode="horizontal" style="width: 100%" @click="tabIndex">
      <a-menu-item key="1">可访问门店</a-menu-item>
      <a-menu-item key="2">可操作菜单</a-menu-item>
      <a-menu-item key="3">经理终端权限</a-menu-item>
    </a-menu>
    <a-tree
      v-show="current[0] === '1'"
      v-model="storeCheckedKeys"
      checkable
      :expanded-keys="storeExpandedKeys"
      :auto-expand-parent="storeAutoExpandParent"
      :selected-keys="storeSelectedKeys"
      :tree-data="storeTreeData"
      @expand="storeOnExpand"
      @select="storeOnSelect"
    />
    <div v-show="current[0] === '2'" class="storeMenu">
      <div class="storeCon">
        <div v-for="(item,index) in webTreeData" :key="index" :class="item.flag?'storeMenuItem active':'storeMenuItem'">
          <a-checkbox :checked="item.flag" @change="e=>{menuChange(e,index)}">
            {{item.title}}
          </a-checkbox>
        </div>
      </div>
      <div class="storeCon">
        <div v-for="(item,index) in webTreeDataChild" :key="index" :class="item.flag?'storeMenuItem active':'storeMenuItem'">
          <a-checkbox :checked="item.flag" @change="e=>{menuChildChange(e,index)}">
            {{item.title}}
          </a-checkbox>
        </div>
      </div>
      <div class="storeCon" v-if="webTreeDataChildBtn.length>0">
        <div v-for="(item,index) in webTreeDataChildBtn" :key="index" :class="item.flag?'storeMenuItem active':'storeMenuItem'">
          <a-checkbox :checked="item.flag" @change="e=>{menuChildBtnChange(e,index)}">
            {{item.name}}
          </a-checkbox>
        </div>
      </div>
    </div>
    <a-tree
      v-show="current[0] === '3'"
      v-model="ipadCheckedKeys"
      checkable
      :expanded-keys="ipadExpandedKeys"
      :auto-expand-parent="ipadAutoExpandParent"
      :selected-keys="ipadSelectedKeys"
      :tree-data="ipadTreeData"
      @expand="ipadOnExpand"
      @select="ipadOnSelect"
    />
  </div>
</template>
<script>
  import { unique } from '@/utils/index'
  export default {
    name:'appendAccount',
    props:{
      appendData: Array,
      idKey:{
        default: {},
        type: Object
      }
    },
    data(){
      return {
        current: ['1'],
        storeExpandedKeys: [],
        storeAutoExpandParent: true,
        storeCheckedKeys: [],
        storeSelectedKeys: [],
        storeTreeData: [],
        webExpandedKeys: [],
        webAutoExpandParent: true,
        webCheckedKeys: [],
        webSelectedKeys: [],
        webTreeData: [],
        webTreeDataChild:[],
        webTreeDataChildBtn:[],
        ipadExpandedKeys: [],
        ipadAutoExpandParent: true,
        ipadCheckedKeys: [],
        ipadSelectedKeys: [],
        ipadTreeData: [],
        webKey:[],
        webIndex:0,
        configWeb:[],
      }
    },
    created() {
      this.getList();
      if(this.idKey.hasOwnProperty('store_no')){
        this.storeCheckedKeys = this.idKey.store_no
      }
      if(this.idKey.hasOwnProperty('ipad')){
        this.ipadCheckedKeys = this.idKey.ipad;
      }
      if(this.idKey.hasOwnProperty('web')){
        this.getTwo(1)
      }
    },
    methods:{
      getTwo(type,defaultWeb){
        this.Api.adminPermissions().then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          let store = type === 1?res.data.web:res.data.ipad;
          // let store = type === 1?res.data.ipad:res.data.ipad;
          for(let i=0;i<store.length;i++){
            store[i].key = store[i].id;
            store[i].title = store[i].name;
            store[i].children = store[i].child;
            store[i].flag = false;
            for(let j=0;j<store[i].children.length;j++){
              store[i].children[j].key = store[i].children[j].id;
              store[i].children[j].flag = false;
              store[i].children[j].title = store[i].children[j].name;
            }
          }
          if(type === 1){
            this.configWeb.forEach((item,index)=> {
              this.webCheckedKeys.push(item.id);
              this.webKey.push(item.id);
              if (item.child && item.child.length > 0) {
                item.child.forEach(demo => {
                  this.webCheckedKeys.push(demo.id);
                  this.webKey.push(demo.id);
                  if (demo.child && demo.child.length > 0) {
                    demo.child.forEach(child => {
                      this.webCheckedKeys.push(child.id);
                      this.webKey.push(child.id);
                    })
                  }
                })
              }
            });
            if(this.idKey.hasOwnProperty('web')){
              this.idKey.web.forEach((item,index)=>{
                this.webCheckedKeys.push(item.id);
                this.webKey.push(item.id);
                if(item.child && item.child.length>0){
                  item.child.forEach(demo=>{
                    this.webCheckedKeys.push(demo.id);
                    this.webKey.push(demo.id);
                    if(demo.child && demo.child.length>0){
                      demo.child.forEach(child=>{
                        this.webCheckedKeys.push(child.id);
                        this.webKey.push(child.id);
                      })
                    }
                  })
                }
              });
            }
            this.webCheckedKeys.forEach(item=>{
              store.forEach(demo=>{
                if(item === demo.id){
                  demo.flag = true
                }else{
                  demo.child.forEach(child=>{
                    if(item === child.id){
                      child.flag = true
                    }
                  })
                }
              })
            });
            for(let i=0;i<store.length;i++){
              if(store[i].flag){
                store[i].flag = true;
                this.webTreeDataChild = store[i].child;
                break;
              }
            }
            if(this.webTreeDataChild.length>0){
              this.webCheckedKeys.forEach(item=> {
                this.webTreeDataChild.forEach(demo => {
                  if (item === demo.id) {
                    demo.flag = true
                  }
                })
              })
            }
            for(let i=0;i<this.webTreeDataChild.length;i++){
              if(this.webTreeDataChild[i].flag){
                this.webTreeDataChild[i].flag = true;
                this.webTreeDataChildBtn = this.webTreeDataChild[i].child;
                break;
              }
            }
            this.webCheckedKeys.forEach(item=>{
              this.webTreeDataChildBtn.forEach(demo=>{
                if (item === demo.id) {
                  demo.flag = true
                }
              })
            });
          }
          if((type === 1 || type === 3) && this.webTreeData.length<=0){
            this.webTreeData = store
          }
          if(type === 2 && this.ipadTreeData.length<=0){
            this.ipadTreeData = store
          }
        })
      },
      menuChildBtnChange(e,index){
        let is_true = e.target.checked;
        let configWebTreeDataChildBtn = JSON.parse(JSON.stringify(this.webTreeDataChildBtn));
        if(is_true){
          let is_sort = false;
          this.webKey.forEach((item,idx)=>{
            if(item === configWebTreeDataChildBtn[index].id) is_sort = true
          });
          if(!is_sort) this.webKey.push(this.webTreeDataChild[index].key);
          if(!is_sort) this.webCheckedKeys.push(this.webTreeDataChild[index].key)
        }else{
          this.webKey.forEach((item,idx)=>{
            if(item === this.webTreeDataChildBtn[index].id) this.webKey.splice(idx,1)
          });
          this.webCheckedKeys.forEach((item,idx)=>{
            if(item === this.webTreeDataChildBtn[index].id) this.webCheckedKeys.splice(idx,1)
          });
        }
        configWebTreeDataChildBtn[index].flag = is_true;
        this.webTreeDataChildBtn = configWebTreeDataChildBtn
      },
      menuChildChange(e,index){
        let is_true = e.target.checked;
        if(is_true){
          let is_sort = false;
          this.webKey.forEach((item,idx)=>{
            if(item === this.webTreeDataChild[index].key) is_sort = true
          });
          this.webTreeData[this.webIndex].flag = true;
          if(this.webTreeDataChild[index].child && this.webTreeDataChild[index].child.length>0){
            this.webTreeDataChild[index].child.forEach(item=>{if(!item.hasOwnProperty('flag')) item.flag = false});
            this.webCheckedKeys.forEach(item=>{
              this.webTreeDataChild[index].child.forEach(demo=>{
                if(item === demo.id){
                  demo.flag = true
                }
              })
            });
          }
          if(!is_sort) this.webKey.push(this.webTreeDataChild[index].key);
          if(!is_sort) this.webCheckedKeys.push(this.webTreeDataChild[index].key)

        }else{
          this.webKey.forEach((item,idx)=>{
            if(item === this.webTreeDataChild[index].key) this.webKey.splice(idx,1)
          });
          this.webCheckedKeys.forEach((item,idx)=>{
            if(item === this.webTreeDataChild[index].key) this.webCheckedKeys.splice(idx,1)
          });
        }
        this.webTreeDataChild[index].flag = is_true;
      },
      menuChange(e,index){
        let is_true = e.target.checked;
        if(is_true){
          let is_sort = false;
          this.webIndex = index;
          this.webKey.forEach((item,idx)=>{
            if(item === this.webTreeData[idx].key) is_sort = true
          });
          if(!is_sort) this.webKey.push(this.webTreeData[index].key);
          if(!is_sort) this.webCheckedKeys.push(this.webTreeData[index].key);
          if(is_true) this.webTreeDataChild = this.webTreeData[index].children;
        }else{
          this.webKey.forEach((item,idx)=>{
            if(item === this.webTreeData[index].key) this.webKey.splice(idx,1)
          });
          this.webCheckedKeys.forEach((item,idx)=>{
            if(item === this.webTreeData[index].key) this.webCheckedKeys.splice(idx,1)
          });
        }
        this.webTreeDataChildBtn = [];
        this.webTreeData[index].flag = is_true;
        this.webKey = []
      },
      tabIndex(e){
        switch (e.key) {
          case '1':
            this.getList();
            break;
            case '2':
              this.getTwo(3);
              break;
              case '3':
                this.getTwo(2);
                break;
        }
      },

      getList(){
        this.Api.allStores().then(res=>{
          let store = res.data;
          store.children = store.areas;
          store.key = 0;
          store.title = store.name;
          for(let i=0;i<store.children.length;i++){
            store.children[i].key = store.children[i].area_no;
            store.children[i].title = store.children[i].name;
            store.children[i].children = store.children[i].stores;
            let child = store.children[i].children;
            for(let j=0;j<child.length;j++){
              child[j].key = child[j].area_no;
              child[j].title = child[j].name;
            }
          }
          this.storeTreeData = [store]
        })
      },
      storeOnExpand(expandedKeys) {
        this.storeExpandedKeys = expandedKeys;
        this.storeAutoExpandParent = false;
      },
      storeOnSelect(checkedKeys) {
        this.storeCheckedKeys = checkedKeys;
      },
      ipadOnExpand(expandedKeys) {
        this.ipadExpandedKeys = expandedKeys;
        this.ipadAutoExpandParent = false;
      },
      ipadOnSelect(checkedKeys) {
        this.ipadCheckedKeys = checkedKeys;
      },
      selectChange(index,idx){
        this.appendData[index].val = idx;
      },
      selectRoleChange(index,idx,data){
        // console.log(index,idx,data)
        let configKeys = [];
        let configWeb = [];
        this.appendData[index].val = idx;
        for(let i=0;i<idx.length;i++){
          for(let j=0;j<data.length;j++){
            if(idx[i] === data[j].id){
              data[j].permissions.ipad.forEach(item=>{
                configKeys.push(item.id)
              });
              data[j].permissions.web.forEach(item=>{
                configWeb.push(item)
              })
            }
            this.webTreeData.forEach(item=>{
              if(item.id === idx[i]){
                item.flag = true;
                this.webKey.push(item.id)
              }
            })
          }
        }
        let obj = {};
        configWeb = configWeb.reduce((item, next) => {
          if (!obj[next.id]) {
            item.push(next);
            obj[next.id] = true;
          }
          return item;
        }, []);
        this.configWeb = configWeb;
        console.log(configWeb,'configWeb')
        this.storeCheckedKeys = unique(configKeys);
        this.ipadCheckedKeys = unique(configKeys);
        this.getTwo(3)

      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      unique(arr){
        for(var i=0; i<arr.length; i++){
          for(var j=i+1; j<arr.length; j++){
            if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
              arr.splice(j,1);
              j--;
            }
          }
        }
        return arr;
      },
      sendData(){
        let configData = {};
        for(let i=0;i<this.appendData.length;i++){
          if(this.appendData[i].must && !this.appendData[i].val) return this.$message.info(this.appendData[i].place);
          configData[this.appendData[i].key] = this.appendData[i].val
        }
        configData.store_nos = this.storeCheckedKeys;
        let headquarter_authorize = 1;
        this.storeCheckedKeys.forEach((item,index)=>{
          if(item === 0){
            headquarter_authorize = 1;
            this.storeCheckedKeys.splice(index,1)
          }else{
            headquarter_authorize = 2
          }
        });
        configData.permissions = this.webCheckedKeys.concat(this.ipadCheckedKeys);
        configData.permissions = unique(configData.permissions);
        configData.headquarter_authorize = headquarter_authorize;
        this.$emit('sendData',configData);
      }
    }
  }
</script>
<style lang="less" scoped>
  .appendAccount{
    display: flex;
    flex-wrap: wrap;
    .item{
      width: 50%;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .itemName{
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 100px;
        justify-content: flex-end;
      }
    }
    .storeMenu{
      .storeCon{
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px dashed #E9E9E9;
        padding: 14px 0;
        .storeMenuItem{
          min-width: 100px;
          height: 33px;
          border: 1px solid #D9D9D9;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          margin-bottom: 5px;
          padding: 0 6px;
          box-sizing: border-box;
        }
        .active{
          border: 1px solid #006AFF;
          color: #006AFF;
          background: #F2F7FF;
          .ant-checkbox-wrapper{
            color: #006AFF;
          }
        }
      }
      .storeCon:nth-last-child(1){
        border-bottom: 0;
      }
    }
  }
</style>
